import React, {Fragment} from 'react'
import {withRouter, Link} from 'react-router-dom';
import NavContainer from '../nav/NavContainer'
import Nav from '../nav/Nav'
import {Layout, message} from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    FullscreenOutlined,
    FullscreenExitOutlined,
    UserOutlined
} from '@ant-design/icons';
import './Home.less';
import {UserService} from "../eosjs/EosService";

const {Header, Content, Footer, Sider} = Layout;

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userName: "登录",
            href: "/login",
            collapsed: false,
            fullscreen: false,
            isUserInfoOK: false,
        };
    }

    componentDidMount() {
        this.state.timer1 = setInterval(() => {
                if (localStorage.getItem("name_account") === null) {
                    return;
                }
                this.setState({
                    userName: localStorage.getItem("name_account"),
                    // href: "/userInfo",
                    href: "/user/" + localStorage.getItem("name_account"),
                });
                UserService.getUserInfo(localStorage.getItem("name_account")).then(res => {
                    // console.log(res)
                    if (res.rows === null && this.props.location.pathname !== "/user/" + localStorage.getItem("name_account")) {
                        message.warning("请先填写个人信息！")
                        this.props.history.push("/user/" + localStorage.getItem("name_account"));
                    }
                    // console.log(res)
                })
                // this.forceUpdate();
                // clearInterval(this.state.timer1);
            },
            1000
        );

    }

    /**
     * 全屏和退出全屏的方法
     * @param num 1代表全屏 2代表退出全屏
     * @returns {Promise}
     */
    screenFun = (num) => {
        num = num || 1;
        num = num * 1;
        let docElm = document.documentElement;

        switch (num) {
            case 1:
                if (docElm.requestFullscreen) {
                    docElm.requestFullscreen();
                } else if (docElm.mozRequestFullScreen) {
                    docElm.mozRequestFullScreen();
                } else if (docElm.webkitRequestFullScreen) {
                    docElm.webkitRequestFullScreen();
                } else if (docElm.msRequestFullscreen) {
                    docElm.msRequestFullscreen();
                }
                break;
            case 2:
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
                break;
        }

        return new Promise(function (res, rej) {
            res("返回值");
        });
    }
    toggleCollapsed = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };
    toggleFull = () => {
        if (this.state.fullscreen) {
            this.screenFun(2)
            //     .then(function () {
            //     $("#fullScreen").children("i").eq(0).removeClass("layui-icon-screen-restore");
            // });
        } else {
            this.screenFun(1)
            //     .then(function () {
            //     $("#fullScreen").children("i").eq(0).addClass("layui-icon-screen-restore");
            // });
        }
        this.setState({
            fullscreen: !this.state.fullscreen,
        });
    };
    getLogin = () => {
        // let arr1, reg1 = new RegExp("(^| )" + 'privateKey' + "=([^;]*)(;|$)");

        this.props.history.push(this.state.href);
    }

    render() {
        const {collapsed, fullscreen} = this.state;
        return (
            <Layout>
                <Sider trigger={null} collapsible collapsed={collapsed}>
                    {
                        collapsed ? "" : <div className="name-logo"/>
                    }
                    <Nav/>
                </Sider>
                <Layout className="site-layout">
                    <Header className="site-layout-background" style={{padding: 0}}>
                        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger collapsed-icon',
                            onClick: this.toggleCollapsed,
                        })}
                        {/*{React.createElement(fullscreen ? FullscreenExitOutlined : FullscreenOutlined, {*/}
                        {/*    className: 'trigger fullscreen-icon',*/}
                        {/*    onClick: this.toggleFull,*/}
                        {/*})}*/}
                        {React.createElement(UserOutlined, {
                            className: 'trigger user-icon',
                            onClick: this.getLogin,
                        })}

                        <Link to={this.state.href} className="user-name">
                            {this.state.userName}
                        </Link>

                    </Header>
                    <Content
                        className="site-layout-background"
                    >
                        {this.props.children}
                    </Content>
                    {/*<Footer style={{ textAlign: 'center' }}>京ICP备18001280号-2</Footer>*/}

                </Layout>

            </Layout>

        )
    }
}

export default withRouter(Home);

